
<mat-card class="upper-card" [ngStyle]="{width}">
  <button (click)="hide()">hide</button>
  <!-- <button #clock_button mat-button [matMenuTriggerFor]="clock_menu">时钟</button> -->
  <!-- <mat-menu #clock_menu="matMenu"> </mat-menu> -->

  <mat-form-field>
    <input name="" matInput placeholder="10:08:00" [(ngModel)]="clock_value" />
  </mat-form-field>
  <button (click)="add_clock()">add_clock</button>

  <!-- <button mat-button (click)="openDialog()">Pick one</button> -->

  <mat-form-field appearance="fill" class="date-container">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker" [(ngModel)]="date" (ngModelChange)="updateDate($event)" />
    <mat-hint>MM/DD/YYYY</mat-hint>
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</mat-card>

<p>{{ board }}</p>

<div
  class="lines"
  (mousemove)="linesOnMouseMove($event)"
  (mouseenter)="linesOnMouseEnter($event)"
  (mouseleave)="linesOnMouseLeave($event)"
>
  <div class="vertical-line" [ngStyle]="{ left: mouseX + 'px' }"></div>
  <div class="vertical-line-start" [ngStyle]="{ left: mouseXStart + 'px', display: startLineDisplay }"></div>

  <div class="vertical-line-end" [ngStyle]="{ left: mouseXEnd + 'px', display: endLineDisplay }"></div>
  <div class="time-line" [ngStyle]="{ left: timeLineLeft + 'px' }"></div>

  <div class="tag-line">
    <div
      class="tag-line-element"
      *ngFor="let e of tagLineElements"
      [ngStyle]="{ width: e.width + 'px', left: e.left + 'px', backgroundColor: '#' + e.color }"
      (click)="tagLineElementOnClick(e)"
      (mouseenter)="tagLineElementOnMouseEnter(e)"
      (mouseleave)="tagLineElementOnMouseLeave(e)"
      (dblclick)="tagLineElementOnDblClick(e)"
    ></div>
  </div>

  <div class="program-line">
    <div
      class="program-line-element"
      *ngFor="let e of programLineElements"
      [ngStyle]="{ width: e.width + 'px', left: e.left + 'px', backgroundColor: '#' + e.color }"
      (click)="programLineElementOnClick(e)"
      (mouseenter)="programLineElementOnMouseEnter(e)"
      (mouseleave)="programLineElementOnMouseLeave(e)"
      (mousemove)="programLineElementOnMouseMove(e)"
    ></div>
  </div>
</div>

<!-- <input type="number" [(ngModel)]="lineStartTime" />
<input type="number" [(ngModel)]="lineEndTime" />
<div class="time-axis">
  <div
    #timeAxis
    class="time-block"
    cdkDrag
    cdkDragLockAxis="x"
    cdkDragBoundary=".time-axis"
    [ngStyle]="{
      width: ((lineEndTime - lineStartTime) / (dateEndTime - dateStartTime)) * width + 'px',
      transform: 'translateX(' + ((lineStartTime - dateStartTime) / (dateEndTime - dateStartTime)) * width + 'px)'
    }"
    (cdkDragMoved)="timeAxisMove($event)"
  ></div>
</div> -->

<div class="bottom">
  <section class="table-container mat-elevation-z8" tabindex="0">
    <table id="table" mat-table [dataSource]="programLines">
      <!-- ID Column -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let program">{{ program.id }}</td>
      </ng-container>

      <!-- Program Name Column -->
      <ng-container matColumnDef="program_name">
        <th mat-header-cell *matHeaderCellDef>Program Name</th>
        <td mat-cell *matCellDef="let program">{{ program.name }}</td>
      </ng-container>

      <!-- Title Column -->
      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef>Title</th>
        <td mat-cell *matCellDef="let program">{{ program.title }}</td>
      </ng-container>

      <!-- Begin Time Column -->
      <ng-container matColumnDef="begin_time">
        <th mat-header-cell *matHeaderCellDef>Begin Time</th>
        <td mat-cell *matCellDef="let program">{{ program.begin_time|date:'HH:mm:ss' }}</td>
      </ng-container>

      <!-- End Time Column -->
      <ng-container matColumnDef="end_time">
        <th mat-header-cell *matHeaderCellDef>End Time</th>
        <td mat-cell *matCellDef="let program">{{ program.end_time|date:'HH:mm:ss' }}</td>
      </ng-container>

      <!-- Table Rows -->
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let program; columns: displayedColumns"></tr>
    </table>
  </section>

  <!-- <img id="capture" [src]="getSafeUrl(imgSrc)" alt="截屏图片"/> -->
  <div class="capture-card">
    <img id="capture" [src]="getSafeUrl(imgSrc)" alt="截屏图片" />
  </div>
</div>
